<template>
<div>



  <el-button type="primary" v-on:click="refresh" icon="el-icon-refresh">刷新</el-button>
  <span>核心统计</span>
  <el-row>
<!--    <el-col :span="4" :offset="1">-->
    <el-table
      :data="userHand"
      height="500"
      max-height="500"
      border
      show-summary
      :summary-method="getSummaries"
      class="main"
    >
      <el-table-column label="每个人支持了榜单数">
        <el-table-column
          type="index"
          width="80"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="count"
          sortable
          label="参与榜单数"
          align="center">
        </el-table-column>
      </el-table-column>

    </el-table>
<!--    </el-col>-->
<!--    <el-col :span="4" :offset="1">-->
    <el-table
      :data="totalNum"
      height="500"
      max-height="500"
      border
      show-summary
      :summary-method="getSummaries"
      class="main"
    >
      <el-table-column label="每个人支持总次数" align="center">
        <el-table-column
          type="index"
          width="80"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="count"
          sortable
          label="支持次数"
          align="center">
        </el-table-column>
      </el-table-column>

    </el-table>
<!--    </el-col>-->
<!--    <el-col :span="4" :offset="1">-->
    <el-table
      :data="boardApply"
      height="500"
      max-height="500"
      border
      show-summary
      :summary-method="getSummaries"
      class="main"
    >
      <el-table-column label="每个榜单被支持的总数" align="center">
        <el-table-column
          type="index"
          width="80"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="榜单名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="count"
          sortable
          label="被支持数量"
          align="center">
        </el-table-column>
      </el-table-column>

    </el-table>
<!--    </el-col>-->
  </el-row>

  <span>选择查看类型</span>
  <div>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="model in staticCheck" @change="boxSelChange(model, $event)" :label="model.title" :key="model.title">{{model.title}}</el-checkbox>
    </el-checkbox-group>
  </div>

  <div style="margin-top: 30px">
    <el-row>
      <el-col :span="6" v-for="detail in selStatics" :key="detail.title" :offset="1">
        <el-table
          :data="detail.userDetail"
          height="500"
          max-height="500"
          border
          show-summary
          :summary-method="getSummaries"
          class="sub"
        >

          <el-table-column :label=detail.title align="center">
            <el-table-column
              type="index"
              width="80"
              label="序号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="count"
              sortable
              label="参与数量"
              align="center">
            </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>



</div>
</template>

<script>

  import {statics} from './Check'
  export default {
    name: 'CheckStatic',
    data() {
      return {
        checkAll: false,
        checkedCities: [],
        selStatics:[],
        staticCheck:statics,
        isIndeterminate: true,
        userHand:[],
        totalNum:[],
        boardApply:[]
      };
    },
    mounted(){
      this.refresh();
    },
    methods: {
      boxSelChange(value, checked){
        if (checked == true){
          this.loadData(value)
          // this.selStatics.push(value)
        } else {
          var _tmp = this.selStatics;
          for (var i = 0, len = _tmp.length; i < len; i++) {
            if (_tmp[i].title == value.title) {
              _tmp.splice(i, 1);
              break;
            }
          }
          this.selStatics = _tmp;
        }

      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;


        this.checkAll = checkedCount === this.staticCheck.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.staticCheck.length;
      },

      getSummaries(param) {


        const { columns, data } = param;
        const sums = [];

        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }

          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = 'N/A';
          }

        });


        return sums;
      },
      refresh(){
        this.getAxios('behaviorRecord/getCoreStatisstic',{
          type:1,
          kinds:'home_zhizhi,listDetail_zhizhi,listContent_zhizhi'
        }).then(res => {
          this.userHand = res.data.userHand
          this.totalNum = res.data.totalNum
          this.boardApply = res.data.boardApply


        }).catch(error => {
          alert(error)
        })
      },
      loadData(model){

        var url = model.defined == true ? 'behaviorRecord/definiteStatistic' : 'behaviorRecord/undefiniteStatistic'
        this.getAxios(url,{
          type:model.type,
          kinds:model.kinds,
          boardType:model.boardType
        }).then(res => {
          model.netData = res.data
          model.totalNum = res.data.totalNum
          model.totalUser = res.data.totalUser
          model.userDetail = res.data.userDetail

          this.selStatics.push(model)
          // var _tmp = this.selStatics;
          // for (var i = 0, len = _tmp.length; i < len; i++) {
          //   if (_tmp[i].title == model.title) {
          //     _tmp.splice(i, 1, model);
          //     break;
          //   }
          // }
          // this.selStatics = _tmp;

        }).catch(error => {
          alert(error)
        })
      }
    }
  }
</script>

<style scoped>
  .main{
    width: 30%;
    margin-top: 10px;
    margin-right: 10px;
    float: left;

  }

  .sub{

    margin-top: 10px;
    margin-left: 10px;
  }
</style>
